<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一日游</title>
    <link rel="stylesheet" href="style/reset.css"/>
    <style>
        body{
            font-size: 14px;
            font-family: "Microsoft YaHei","SimSun";
            /* 页面字体属性 */
        }
        hr{
            margin: 10px 0;
            /* 分割线水平居中 */
        }
        .inner_c{
            width: 980px;
            margin: 0 auto;/*水平居中 */
        } 
        #header{

              margin: 10px 0;
              overflow: hidden;  /* 解决浮动塌陷 */
            
        }
        #logo{
            float: left;
            margin-right: 40px;
            /* logo图标 */
        }
        #nav{
            float: right;
        }
        #nav ul li{
            float: left;
            width: 100px;
        }
        #nav ul li a{
         display: block;
         text-align: center;
         text-decoration: none;
         color: #888888;
         border-right: 1px solid #888888;
         /* 链接属性 */
        }
        #nav ul li a:hover{
            /* 鼠标悬停修改颜色和背景色 */
            color: black;
        }
        #nav ul li:last-child a{
            /* 最后一个li的a没有右框线 */
            border-right: none;
        }
        #banner img{
            float: left;
            width: 696px;
        }
        #intro{
            float: right;
            width: 260px;
            color: #888888;
        }
        #intro h1{
            text-align: center;
            color: orange;
            font-size: 20px;
            letter-spacing: 10px;
            font-weight: bold;
            /* 说旅游字体属性 */
        }
        #intro h1 span{
            font-size: 28px;
            /* 字体大小 */
        }
        #intro p{
            text-indent: 2em;
            line-height: 1.5em;
            margin: 1em 0;
        }
        #intro p a{
            text-decoration: none;
            color: orange;
        }
        #comment ul li{
            overflow: hidden;
            border-top: 1px dotted #888888;
        }
        #comment ul li:first-child{
            border-top: none;
        }
        #comment ul li img{
            float: left;
            padding: 20px;
            /* 图片填充 */
        }
        div.comment_detail{
            padding:20px 10px;
        }
        span.comment_user{
            color: orange;
            font-size: 16px;
            padding-right: 50px;
            /* 网友 */
        }
        span.comment_time{
            color: #888887;
            font-size: 12px;
            /* 评论时间 */
        }
        div.comment_detail p{
            padding-top: 10px;
        }
        #footer p 
        {
            text-align: center;
            color:#888886;
        padding-bottom: 20px; }
    /* 页面尾部        */
    </style>
</head>
<body>
    <div class="inner_c">
        <div id="header">
            <div id="logo"><img src="images/logo.png" alt="一日游"></div>
            <div id="nav">
                <ul>
                    <li><a href="">旅游首页</a></li>
                    <li><a href="">登陆</a></li>
                    <li><a href="">注册</a></li>
                </ul>
            </div>
        </div>
        <div id="banner">
            <div id="content">
                <div id="banner1">
                    <img src="images/banner.jpg" alt="">
                    <div id="intro">
                        <h1>说
                            <span>旅</span>
                            游
                        </h1>
                        <p>
                            伊露岛（Iru Fushi）位于马尔代夫北部环礁——诺鲁环礁（Noonu
                            Atoll）中，它是一座拥有醉人景色和浪漫气氛的小岛。晶莹的海水、绵白的沙滩、明媚的阳光、
                            温馨的海边小屋、浪漫的海上落日。所有的一切似乎都为浪漫而存在，美丽而遗世独立。
                        </p>
                        <p>最佳旅游时间：1月-12月，热带海洋气候，全年皆适合旅游。12月至次年4月可避开高峰。</p>
                        <p>伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框
                            <a href="">......[详细]</a>
                        </p>
                    </div>
                    <!-- 下面这个div作用是隔墙，防止兄弟浮动后导致父容器塌陷 -->
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>
        <div id="comment">
            <ul>
                <li>
                    <img src="images/person1.jpg" alt="">
                    <div class="comment_detail">
                        <div><span class="comment_user">张三</span><span class="comment_time">2022-01-01 13:00:00</span></div>
                        <p>第一次用途牛，太让我们惊喜了！真的很不错，行程安排的也很好！幸运的是，往返飞机都没有延误！伊露岛的美，让我们的蜜月越发美满</p>
                    </div>
                </li>
                <li>
                    <img src="images/person2.jpg" alt="">
                    <div class="comment_detail">
                        <div><span class="comment_user">李四</span><span class="comment_time">2022-01-01 13:00:00</span></div>
                        <p>岛还可以，就是沙屋有虫子，不太让人满意，水屋确实挺棒的。饭嘛，国外基本都那样吧，海鲜还行</p>
                    </div>
                </li>
                <li>
                    <img src="images/person3.jpg" alt="">
                    <div class="comment_detail">
                        <div><span class="comment_user">王五</span><span class="comment_time">2022-01-01 13:00:00</span></div>
                        <p>行程安排挺好的，挺喜欢伊露岛，岛上的人很热情，手机丢了小黑给找回来了，都很热情，会主动跟你招呼</p>
                    </div>
                </li>
            </ul>
        </div>
        <div id="footer">
            <p>Copyright 2013-2023 一日游 yiriyou.com AllRighrs Reserved.</p>
        </div>
    </div>
</body>
</html>